<template>
  {{ msg }}
  <el-form
    label-position="top"
    label-width="100px"
    :model="formData.data"
    style="max-width: 360px"
  >
    <el-form-item label="账号:">
      <el-input v-model="formData.data.username" />
    </el-form-item>
    <el-form-item label="员工姓名:">
      <el-input v-model="formData.data.name" />
    </el-form-item>
    <el-form-item label="手机号:">
      <el-input v-model="formData.data.phone" />
    </el-form-item>
    <el-form-item label="性别:">
      <el-radio-group v-model="formData.data.sex" class="ml-4">
        <el-radio label="1" size="large">男</el-radio>
        <el-radio label="2" size="large">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="身份号:">
      <el-input v-model="formData.data.idNumber" />
    </el-form-item>
  </el-form>
  <el-button @click="methods.send(true)">取消</el-button>
  <el-button type="primary" v-if="!isEditMode" @click="methods.requestData"> 保存用户 </el-button>
  <el-button type="primary" v-if="isEditMode" @click="methods.requestUpdateData"> 修改用户 </el-button>
</template>
<script lang="ts">
import { employeeAdd, employeeGetSingle, employeeUpdate } from "@/api/EmployeeManage";
import { EmployeeAddReqFormWrapper, EmployeeGetSingleReqForm } from "@/entity/entityDefine";
import { defineComponent, reactive } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  emits: ['fatherFun'], // 避免vue3 emit 报错
  name: "UserEdit",
  props: {
    msg: String,
    isEditMode: Boolean
  },
  setup(props, { emit }) {

    const data = {
      id:"",
      name: "",
      username: "",
      sex: "1",
      phone: "",
      idNumber: "",
    }
    const formData: EmployeeAddReqFormWrapper = reactive({
        data:data
    });

    const methods = {
      send(result:boolean) {
        emit("fatherFun", result); // 第一个参数是子组件派发的函数名(子传父是通过函数事件派发)
      },

      setEditId(id: string) {
        //
        methods.requestGetUserData(id)
      },

      resetState() {
        formData.data = {
            id: "",
            name: "",
            username: "",
            sex: "",
            phone: "",
            idNumber: "",
            }
      },

      async requestData() {
        const { code, msg, data } = await employeeAdd(formData.data);

        if (code == 200) {
            ElMessage.success("添加成功");
          // 清空数据
          formData.data = {
            id:"",
            name: "",
            username: "",
            sex: "",
            phone: "",
            idNumber: "",
            }

            methods.send(true)  
        } else {
            methods.send(false)
          // 网络层已提示信息
          // console.log(msg);
        }
      },

      async requestGetUserData(userId: string) {
        
        let param: EmployeeGetSingleReqForm = {
          id: userId
        };

        const { code, msg, data } = await employeeGetSingle(param);

        if (code == 200) {

          let res = data!
          
          formData.data = res;
          // 清空数据
        } else {
          // 网络层已提示信息
          // console.log(msg);
        }
      },

      async requestUpdateData() {
        const { code, msg, data } = await employeeUpdate(formData.data);

        if (code == 200) {
            ElMessage.success("修改成功");
          // 清空数据
          formData.data = {
            id: "",
            name: "",
            username: "",
            sex: "",
            phone: "",
            idNumber: "",
            }

            methods.send(true)  
        } else {
            methods.send(false)
          // 网络层已提示信息
          // console.log(msg);
        }
      },

    };

    return {
      formData,
      methods,
    };
  },
});
</script>

function emit(arg0: string, str: any) { throw new Error("Function not
implemented."); }
